<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import SearchCard from './components/listCard.vue'
import MapChart from './components/mapChart.vue'
import ListCard from '@/components/common/listCard.vue'

const country = ref([
  { name: '中国', num: 62513 },
  { name: '基里巴斯', num: 275 },
  { name: '美国', num: 113 },
  { name: '德国', num: 78 },
  { name: '土耳其', num: 28 }
])

const activeNames = ref(['1'])

// 关键字
const keyword = ref('')

// 搜索列表
const searchList = ref([
  {
    id: 1,
    title: 'XXXX（中国电信股份有限公司）',
    content: '邮箱：xxxx@baidu.com',
    time: '2016-10-22 12:00:00'
  },
  {
    id: 2,
    title: 'XXXX（中国电信股份有限公司）',
    content: '邮箱：xxxx@baidu.com',
    time: '2016-10-22 12:00:00'
  },
  {
    id: 3,
    title: 'XXXX（中国电信股份有限公司）',
    content: '邮箱：xxxx@baidu.com',
    time: '2016-10-22 12:00:00'
  },
  {
    id: 4,
    title: 'XXXX（中国电信股份有限公司）',
    content: '邮箱：xxxx@baidu.com',
    time: '2016-10-22 12:00:00'
  },
  {
    id: 5,
    title: 'XXXX（中国电信股份有限公司）',
    content: '邮箱：xxxx@baidu.com',
    time: '2016-10-22 12:00:00'
  },
  {
    id: 6,
    title: 'XXXX（中国电信股份有限公司）',
    content: '邮箱：xxxx@baidu.com',
    time: '2016-10-22 12:00:00'
  }
])

const page = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 6
})

// 取消
const close = () => {}
</script>

<template>
  <div class="jm-container flex-space">
    <div class="left">
      <div class="search-container jm-bg-color">
        <jm-collapse v-model="activeNames">
          <jm-collapse-item name="1">
            <template #title>
              <div class="header">国家统计TOP5</div>
            </template>
            <ListCard :list="country" />
            <MapChart class="chart-content" />
          </jm-collapse-item>
        </jm-collapse>
      </div>
    </div>
    <div class="right jm-bg-color">
      <div class="list">
        <!-- 搜索 -->
        <div class="search flex jm-bg-color">
          <jm-input class="input" v-model="keyword" placeholder="请搜索">
            <template #prefix>
              <jm-icon class="el-input__icon"><search /></jm-icon>
            </template>
          </jm-input>
          <jm-button type="primary" @click="close">取消</jm-button>
        </div>
        <!-- 结果 -->
        <div class="list-length">共为你找到 {{ searchList.length }} 条相关结果</div>
        <jm-divider />
        <div class="list-con" v-for="(item, index) in searchList" :key="item.id">
          <SearchCard :info="item" />
          <jm-divider v-if="index + 1 < searchList.length" />
        </div>
        <!-- 分页 -->
        <jmp-pagination
          v-model:page="page.pageNum"
          v-model:limit="page.pageSize"
          v-model:total="page.total"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex-space {
  display: flex;
  justify-content: space-between;
}
.left {
  width: 20%;
  margin-right: 1.25rem;
  .search-container {
    padding: 0.625rem;
    .chart-content {
      width: 100%;
      height: 12.5rem;
    }
  }
}
.right {
  flex: 1;
  padding: 1.875rem;
  .search {
    .input {
      margin-right: 0.625rem;
    }
  }
  .list {
    .list-length {
      margin-top: 1.25rem;
      color: var(--el-color-info);
    }
  }
}
</style>
